<template>
  <div>
    <!-- 按钮 -->
    <div class='options'>
      <el-button type="primary" size='mini' @click='toAdd'>添加</el-button>
    </div>
    <!-- 表格 -->
    <div class='tables'>
      <!-- table.style.height='100px' -->
      <el-table border size='mini' :data="waiterData" height="calc(100vh - 150px)" stripe style="width: 100%" >
        <!-- <el-table-column type=index  prop="" label="编号" width="180">
        </el-table-column> -->
        <el-table-column
          align='center'
          type="index"
          label="编号"
          width="100">
        </el-table-column>
        <el-table-column prop="realname" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="telephone" label="手机号">
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号"  width="150">
        </el-table-column>
        <el-table-column prop="bankCard" label="银行卡号" width="150">
        </el-table-column>
        <el-table-column prop="registerTime" label="注册时间">
        </el-table-column>
        <el-table-column prop="status" label="状态">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button @click="toDelete(scope.row)" type="text" size="mini">删除</el-button>
            <el-button @click="toEdit(scope.row)" type="text" size="mini">编辑</el-button>
            <el-button @click="toDetail(scope.row)" type="text" size="mini">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="queryParams.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryParams.pageSize"
      layout="total,sizes, prev, pager, next"
      :total="total">
    </el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog @close='dialogClose' :title="title" :visible.sync="visible">
      <el-form :rules='rules' ref='ruleForm' :model="form">
        <el-form-item prop='username' label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop='realname' label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.realname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop='telephone' label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop='idCard' label="身份证号" :label-width="formLabelWidth">
          <el-input v-model="form.idCard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop='bankCard' label="银行卡号" :label-width="formLabelWidth">
          <el-input v-model="form.bankCard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop='password' label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//导入api
import {deleteById} from '@/api/waiter.js'
import { mapActions, mapGetters } from 'vuex';
export default {
  data() {
    return {
      queryParams:{
        page:1,
        pageSize:10,
        status:''
      },
      title:'新增员工信息',
      visible:false,
      form:{},
      formLabelWidth:'120px',
      rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          realname: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
          ],
          telephone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
          ],
          idCard: [
            { required: true, message: '请输入身份证号', trigger: 'blur' },
          ],
          bankCard: [
            { required: true, message: '请输入银行卡号', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '密码', trigger: 'blur' },
          ],
          

        }
    };
  },
  computed: {
    ...mapGetters('waiter',['total','waiterData'])
  },
  methods: {
    ...mapActions('waiter',['findAll',"saveOrUpdate"]),
    //每页条数发生变化处理函数
    handleSizeChange(val){
      this.queryParams.pageSize=val;
      this.queryParams.page=1;
      this.findAll(this.queryParams)
    },
    //页码发生变化的时候
    handleCurrentChange(val){
      this.queryParams.page=val;
      this.findAll(this.queryParams);
    },
    //添加
    toAdd(){
      this.form={}
      //显示模态框
      this.visible=true
    },
    //表单重置
    dialogClose(){
      this.$refs['ruleForm'].resetFields();
    },
    //保存
    toSave(){
      //校验数据，数据检验通过后再保存
      this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
             this.saveOrUpdate({
                form:this.form,
                queryParams:this.queryParams,
              }).then(()=>{
                //重置表单
                // this.$refs["ruleForm"].resetFields();
                this.visible=false;
              })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
     
    },
        //删除
    toDelete(row){
      console.log(row.id);
      //询问用户是否删除
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //发请求删除
          deleteById({id:row.id}).then((res)=>{
            if(res.status===200){
              //提示删除成功，并且刷新数据
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
              });
              // this.queryParams.page=1;
              this.findAll(this.queryParams);
            }else{
              this.$notify({
                title: '失败',
                message: '删除失败',
                type: 'error'
              });
            }
          }).catch((err)=>{
            this.$notify({
                title: '失败',
                message: '删除失败',
                type: 'error'
              });
          })
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
        //编辑
    toEdit(row){
      console.log(row)
      this.form = {...row};
      // this.form=row;
      this.title='修改员工信息'
      this.visible=true;
    },
    //跳转到详情
    toDetail(row){
      console.log(row);
      //跳路由
      this.$router.push(`/waiterDetail/${row.id}/index`)
    },
  },
  created() {
    this.findAll(this.queryParams)
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
/**样式 */
.options > * {
  margin-bottom:10px;
}
</style>